{% extends "base_generic.html" %}
{% block script %}
<script type="text/javascript" src="/js/markitup/jquery.markitup.pack.js"></script>
<script type="text/javascript" src="/js/markitup/sets/textile/set.js"></script>
<link rel="stylesheet" type="text/css" href="/js/markitup/skins/simple/style.css" />
<link rel="stylesheet" type="text/css" href="/js/markitup/sets/textile/style.css" />

<script type="text/javascript">

$(window).load(
    function() {
      cleanStyles('#body');
      $('textarea.textile').markItUp(mySettings);
      arrayarticle = new Array();
      arrayarticle['imagetype']='article';
      arrayarticle['service']='uploaded';
      imageUploader('imgarticle', 'articletype', '{{filekey}}', 'article',arrayarticle);
    });

function generateUrl(name) {
  var sanitizedName = string_to_slug(name);
  $("#url").val(sanitizedName);
}

function deleteImage(key,id){
   $.post('/admin/image/delete/' + key + '/',
    function(data){
      data = eval(data);
      $('#' + data[0].type).remove();
    });
}

function article(key){
  strhtml="<div class=\"imgremovable\" id=\"article\"><span class=\"info\">article <a class=\"ax\" href=\"#\" onclick=\"deleteImage('" + key + "');return false;\">del</a></span><img src=\"/image/"+key+"/80/80/cropped/\" /></div>";
  $('#images').append(strhtml);
}
</script>
{% endblock %}
{% block body %}
<body id="articlecontainer">
{% endblock %}
{% block content %}
	<h1>Nuevo Post</h1>
<form name="edit-admin" id="edit-admin" method="post" action="{{path}}">
			   	   
			   <div class="line">
			    <div class="field">
			      <label for="title">Title:</label>
			      <input id="title" name="title" type="text" size="40" value="{{article.title}}" onblur="generateUrl($('#title').val())"/>
			    </div>			  
			  <div class="line">
			    <div class="field">
			      <label for="name">Url:</label>
			      <input id="url" name="url" type="text" size="60" value="{{article.url}}"/>
			    </div>
			   </div>
			   
			    <div class="field">
			      <label for="category">Category:</label>
			      <select name="category" id="category">
			      {% for category in categories %}
			        <option value="{{category.key}}"{% ifequal article.category.url category.url %} selected="selected"{% endifequal %}>{{category.name}}</option>
			      {% endfor %}
			      </select>
			    </div>
			   
			    <div class="field">
			      <label for="category">Align image:</label>
			      <div style="float: left;border: 1px solid black;">
			      <img src="/images/left.png" width="32" />
			      <input type="radio" name="align" value="left"{% ifequal article.alignimage 'left' %} checked="checked"{% endifequal %} />
			      </div>
			      <div style="float: left;border: 1px solid black;">
			      <img src="/images/right.png" width="32" />
			      <input type="radio" name="align" value="right"{% ifequal article.alignimage 'right' %} checked="checked"{% endifequal %} />
			      </div>
			    </div>
			   
			   <div class="line">
 			    <div class="field">
 			      <label for="name">Body:</label>
 			      <textarea class="textile" cols="47" rows="11" id="body" name="body">{{article.body}}</textarea>
 			    </div>
 			   </div>

<div class="field">
  <label for="timees">Imagen:</label>
  <div id="imgarticle" class="inputimg"></div>
</div>
<div id="images">
{% for image in images %}
<div class="imgremovable" id="article"><span class="info">Artículo <a class="ax" href="#" onclick="deleteImage('{{image.key}}','muestra');return false;">del</a></span><img src="/image/{{image.key}}/80/80/cropped/" /></div>
{% endfor %}
</div>
<input type="submit" name="save" id="publish" value="Save" />
<input type="hidden" name="codenum" id="codenum" value="{{filekey}}" />
</form>
<br class="clear" />
{% endblock %}
